<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信公众号位置选择工具</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入微信JS-SDK -->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <style>
        body {
            background-color: #f5f7fa;
        }
        .result-card {
            transition: all 0.3s ease;
        }
        .result-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .btn-primary {
            background-color: #07c160;
            transition: background-color 0.3s;
        }
        .btn-primary:hover {
            background-color: #05a650;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col items-center py-8 px-4">
    <div class="max-w-md w-full bg-white rounded-xl shadow-md overflow-hidden">
        <div class="bg-gradient-to-r from-green-500 to-teal-400 p-6 text-white">
            <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold flex items-center">
                <i class="fa fa-map-marker mr-3 text-xl"></i>位置选择工具
            </h1>
            <p class="mt-2 opacity-90">在地图上选择位置，获取经纬度和详细地址</p>
        </div>
        
        <div class="p-6">
            <button id="selectLocationBtn" class="btn-primary w-full py-3 rounded-lg text-white font-medium flex items-center justify-center">
                <i class="fa fa-map mr-2"></i> 选择位置
            </button>
            
            <div id="resultArea" class="mt-8 hidden">
                <div class="text-sm text-gray-500 mb-3 flex items-center">
                    <i class="fa fa-info-circle mr-2"></i> 选择结果
                </div>
                
                <div class="result-card bg-gray-50 p-5 rounded-lg border border-gray-100">
                    <div class="mb-4">
                        <h3 class="text-sm font-semibold text-gray-500 mb-1">经纬度</h3>
                        <p id="locationCoord" class="text-lg font-medium"></p>
                    </div>
                    
                    <div class="mb-4 pb-4 border-b border-gray-200">
                        <h3 class="text-sm font-semibold text-gray-500 mb-1">详细地址</h3>
                        <p id="locationAddress" class="text-gray-700 line-clamp-3"></p>
                    </div>
                    
                    <div class="flex space-x-3">
                        <button id="copyCoordBtn" class="flex-1 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition">
                            <i class="fa fa-copy mr-1"></i> 复制经纬度
                        </button>
                        <button id="copyAddrBtn" class="flex-1 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition">
                            <i class="fa fa-copy mr-1"></i> 复制地址
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bg-gray-50 px-6 py-4 text-xs text-gray-500">
            <p>提示：请在微信环境中打开此页面以使用位置选择功能</p>
        </div>
    </div>

    <script>
        // ======== 需要用户配置的参数 ========
        const WX_CONFIG = {
            appId: 'YOUR_APP_ID', // 替换为你的微信公众号AppID
            timestamp: 'YOUR_TIMESTAMP', // 替换为后端生成的timestamp
            nonceStr: 'YOUR_NONCESTR', // 替换为后端生成的nonceStr
            signature: 'YOUR_SIGNATURE' // 替换为后端生成的signature
        };
        // =====================================
        
        // 初始化微信JS-SDK
        function initWechatSDK() {
            wx.config({
                debug: false, // 调试时可改为true
                appId: WX_CONFIG.appId,
                timestamp: WX_CONFIG.timestamp,
                nonceStr: WX_CONFIG.nonceStr,
                signature: WX_CONFIG.signature,
                jsApiList: ['openLocation', 'getLocation'] // 需要使用的JS接口列表
            });

            wx.ready(function() {
                console.log('微信JS-SDK初始化成功');
                document.getElementById('selectLocationBtn').disabled = false;
            });

            wx.error(function(res) {
                console.error('微信JS-SDK初始化失败:', res);
                alert('微信JS-SDK初始化失败，请检查配置参数');
            });
        }

        // 调用微信地图选择位置
        function selectLocation() {
            // 先获取当前位置作为初始位置
            wx.getLocation({
                type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
                success: function(res) {
                    const latitude = res.latitude;
                    const longitude = res.longitude;
                    
                    // 打开地图选择位置
                    wx.openLocation({
                        latitude: latitude, // 纬度，浮点数
                        longitude: longitude, // 经度，浮点数
                        name: '初始位置', // 位置名
                        address: '拖动地图选择具体位置', // 地址详情说明
                        scale: 15, // 地图缩放级别,范围从1~28
                        infoUrl: '', // 在查看位置界面底部显示的超链接
                        success: function(selectedRes) {
                            console.log('位置选择成功:', selectedRes);
                            handleLocationSelected(selectedRes.latitude, selectedRes.longitude);
                        },
                        cancel: function() {
                            console.log('用户取消了位置选择');
                        }
                    });
                },
                cancel: function() {
                    alert('需要获取位置权限才能使用此功能');
                }
            });
        }

        // 处理选择的位置信息
        function handleLocationSelected(latitude, longitude) {
            const coordText = `${longitude.toFixed(6)},${latitude.toFixed(6)}`;
            document.getElementById('locationCoord').textContent = coordText;
            
            // 显示结果区域
            document.getElementById('resultArea').classList.remove('hidden');
            
            // 调用逆地理编码获取详细地址
            getAddressFromCoordinates(longitude, latitude);
        }

        // 通过经纬度获取详细地址（使用高德地图API）
        function getAddressFromCoordinates(longitude, latitude) {
            // 这里使用了模拟数据，实际项目中应该调用地图服务商的逆地理编码API
            // 例如高德地图的regeocode接口:https://restapi.amap.com/v3/geocode/regeo
            const addressElement = document.getElementById('locationAddress');
            
            // 显示加载状态
            addressElement.textContent = '正在获取地址信息...';
            
            // 模拟API请求延迟
            setTimeout(() => {
                // 实际应用中，这里应该替换为真实的API调用
                // 以下是模拟数据
                addressElement.textContent = '北京市朝阳区光华路8号和乔大厦A座15层';
            }, 1000);
        }

        // 复制功能
        function copyToClipboard(text, successMessage) {
            navigator.clipboard.writeText(text).then(() => {
                alert(successMessage);
            }).catch(err => {
                alert('复制失败，请手动复制');
                console.error('复制失败:', err);
            });
        }

        // 事件监听
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化微信SDK
            initWechatSDK();
            
            // 选择位置按钮点击事件
            document.getElementById('selectLocationBtn').addEventListener('click', selectLocation);
            
            // 复制经纬度按钮点击事件
            document.getElementById('copyCoordBtn').addEventListener('click', function() {
                const coord = document.getElementById('locationCoord').textContent;
                if (coord) {
                    copyToClipboard(coord, '经纬度已复制到剪贴板');
                }
            });
            
            // 复制地址按钮点击事件
            document.getElementById('copyAddrBtn').addEventListener('click', function() {
                const address = document.getElementById('locationAddress').textContent;
                if (address) {
                    copyToClipboard(address, '地址已复制到剪贴板');
                }
            });
        });
    </script>
</body>
</html>